<template>
  <div class="content">
    <div class="search">
      <span>高级搜索</span>
    </div>
    <el-form label-width="80px" style="margin-top: 27px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="手机号:">
            <el-input
              clearable
              v-model="pageParams.phone"
              style="width: 257px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户名称:">
            <el-input
              clearable
              v-model="pageParams.name"
              style="width: 257px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建日期:">
            <div class="block">
              <el-date-picker
                clearable
                v-model="pageParams.creatTime"
                type="datetimerange"
                :shortcuts="shortcuts"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 237px"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="22" type="flex" justify="end" style="display: flex; justify-content: end">
          <el-form-item>
            <el-button style="width: 102px; height: 40px; border-radius: 20px" @click="reset"
              >重置</el-button
            >
            <el-button
              style="width: 102px; height: 40px; border-radius: 20px"
              type="primary"
              @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list" style="margin-top: 35px">
      <el-table-column label="序号" width="80px" type="index"></el-table-column>
      <el-table-column prop="name" label="用户名称"></el-table-column>
      <el-table-column prop="cluesNum" label="线索数量"></el-table-column>
      <el-table-column prop="businessNum" label="商机数量"></el-table-column>
      <el-table-column prop="creatTime" label="创建时间"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="text" size="small" @click="handle(row)">处理</el-button>
          <el-button type="text" size="small" @click="details(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageParams.page"
        v-model:page-size="pageParams.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="4"
        @change="onChange"
        :show-total="(total) => `共 ${total} 条`"
        show-sizer-changer
        show-quick-jumper
      />
    </div>
    <div class="box">
      <el-dialog title="处理" v-model="isShow" style="width: 550px">
        <div style="margin-left: 147px; margin-bottom: 15px; color: #000">
          <span>类型:</span>
          <span style="margin-left: 15px">线索转派</span>
        </div>
        <div style="margin-left: 147px; margin-bottom: 15px; color: #000">
          <span>编号:</span>
          <span style="margin-left: 15px">{{ lists.serialNumber }}</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>创建日期:</span>
          <span style="margin-left: 15px">{{ lists.creatTime }}</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>用户编号:</span>
          <span style="margin-left: 15px">{{ lists.id }}</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>减员姓名:</span>
          <span style="margin-left: 15px">{{ lists.name }}</span>
        </div>
        <div style="margin-left: 147px; margin-bottom: 15px; color: #000">
          <span>详情:</span>
          <span style="margin-left: 15px"
            >有 <span style="color: #4c99ff">{{ lists.particulars }}</span> 个线索 ,
            需进行分配</span
          >
        </div>
        <el-form :model="selectList" :rules="rules" ref="form">
          <el-form-item label="请选择部门:" style="margin-left: 107px" prop="department">
            <el-select placeholder="请选择" v-model="selectList.department">
              <el-option label="市场一部" value="0 "> </el-option>
              <el-option label="市场二部" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择人员:" style="margin-left: 107px" prop="distributeUser">
            <el-select placeholder="请选择" v-model="selectList.distributeUser">
              <el-option label="admin" value="2">
               
              </el-option>
            </el-select>
          </el-form-item>
          <el-col style="display: flex; justify-content: center">
            <el-form-item>
              <el-button
                style="width: 92px; height: 30px; border-radius: 20px"
                @click="btnCancel"
                >取消</el-button
              >
              <el-button style="width: 92px; height: 30px; border-radius: 20px" type="primary" @click="btnOK"
                >确定</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-dialog>
    </div>

    <div class="box">
      <el-dialog title="详情" v-model="showDiaLog" style="width: 550px">
        <div style="margin-left: 147px; margin-bottom: 15px; color: #000">
          <span>类型:</span>
          <span style="margin-left: 15px">线索转派</span>
        </div>
        <div style="margin-left: 147px; margin-bottom: 15px; color: #000">
          <span>编号:</span>
          <span style="margin-left: 15px">{{ lists.serialNumber }}</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>创建日期:</span>
          <span style="margin-left: 15px">{{ lists.creatTime }}</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>用户编号:</span>
          <span style="margin-left: 15px">{{ lists.id }}</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>减员姓名:</span>
          <span style="margin-left: 15px">{{ lists.name }}</span>
        </div>
        <div style="margin-left: 147px; margin-bottom: 15px; color: #000">
          <span>详情:</span>
          <span style="margin-left: 15px"
            >有 <span style="color: #4c99ff">{{ lists.particulars }}</span> 个线索 ,
            需进行分配</span
          >
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>分配部门:</span>
          <span style="margin-left: 15px">市场一组</span>
        </div>
        <div style="margin-left: 120px; margin-bottom: 15px; color: #000">
          <span>分配人员:</span>
          <span style="margin-left: 15px">admin</span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getReassignmentList, getReassignmentDetail ,handleReassignment} from '@/api/reassignment'
import { ElMessage } from 'element-plus'

const isShow = ref(false)
const showDiaLog = ref(false)
const handle = async (phone) => {
  console.log(phone)
  isShow.value = true
  lists.value = await getReassignmentDetail(phone)
  
  console.log(lists.value)
}
const details = async(phone) => {
  showDiaLog.value = true
  lists.value = await getReassignmentDetail(phone)
}
const selectList = ref([])
const lists = ref([])
const pageParams = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

const list = ref([])
const form = ref(null);
const getReassignmentListAPI = async () => {
  const res = await getReassignmentList(pageParams.value)
  console.log(res)
  list.value = res.records
  selectList.value = res.records
  console.log(selectList.value);
  pageParams.value.total = res.total
}
const onChange = (page, pageSize) => {
  pageParams.value.page = page
  pageParams.value.pageSize = pageSize
  console.log(page, pageSize)
  getReassignmentListAPI(pageParams.value)
}
onMounted(() => {
  getReassignmentListAPI()
})
const search = () => {
  getReassignmentListAPI(pageParams.value)
}
const reset = () => {
  pageParams.value.phone = ''
  pageParams.value.name = ''
  pageParams.value.creatTime = ''
  getReassignmentListAPI(pageParams.value)
}
// const formData = ref({
//   phone:'',
//   name:'',
//   beginTime:'',
//   endTime:''
// })
const btnCancel = () => {
  isShow.value = false
  //重置表单
  selectList.value = []
}
const rules = ref({
  department: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
  distributeUser: [{ required: true, message: '人员不能为空', trigger: 'blur' }]
})
// const listForm = ref({
//   departmentId: '',
//   userId: ''
// })
const btnOK = async() => {

  const valid = await form.value.validate();
  if(valid){
    // const res = await handleReassignment(listForm.value)
    // console.log(res)
    // if(res.code === 200){
    //   isShow.value = false
    //   getReassignmentListAPI()
    // }
    isShow.value = false
    ElMessage.success('处理成功')
  }
  
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding: 28px 0px 0px 32px;
}
.search {
  height: 45px;
  background-color: #f2f2f2;
  span {
    line-height: 45px;
    margin-left: 32px;
    font-style: 16px;
    font-weight: 700;
  }
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
:deep(.el-form-item__label) {
  color: #000 !important;
}
.box {
  :deep(.el-dialog__header) {
    background-color: #1890ff;
  }
  :deep(.el-dialog__title) {
    color: #fff;
  }
  :deep(.el-icon) {
    color: #797979;
    font-size: 20px;
  }
}
:deep(.el-input__wrapper) {
  border-radius: 10px;
  background-color: #f9f9f9;
}
</style>
